<!-- 发起呼叫 -->
<template>
  <div class="send_call">
    <!-- 基础版 -->
    <div v-if="false">
      <h1>发起呼叫</h1>
      <h2>本地用户信息</h2>
      <p>userId: {{ getLocalUserInfo.userId }}</p>
      <!-- 呼叫用户成员信息 -->
      <h2>呼叫用户成员信息</h2>
      <div style="display: flex; justify-content: center">
        <div class="add_userId">
          <el-input
            v-model="peerId"
            @keyup.enter.native="addPeerUser"
            placeholder="请填入呼叫人员 userId"
            style="margin-right: 16px"
          ></el-input>
          <el-button @click="addPeerUser" type="primary">人员添加</el-button>
        </div>
      </div>
      <!-- 需要呼叫的人员列表 -->
      <h4>需要呼叫的人员列表</h4>
      <div class="peer_user_list">
        <template v-if="peerUserList.length > 0">
          <el-tag
            v-for="peerUser in peerUserList"
            :key="peerUser.userId"
            style="margin: 0px 10px"
            closable
            @close="handleClose(peerUser.userId)"
          >
            {{ peerUser.userId }}
          </el-tag>
        </template>
      </div>

      <!-- 发起呼叫 -->
      <div>
        <h3>点对点呼叫</h3>
        <div>
          <el-button @click="sendCallSetFn('p2p', 'audio')">语音呼叫</el-button>
          <el-button @click="sendCallSetFn('p2p', 'video')" type="primary">
            视频呼叫
          </el-button>
        </div>
        <h3>多人呼叫</h3>
        <div>
          <el-button @click="sendCallSetFn('multi', 'audio')">
            语音呼叫
          </el-button>
          <el-button @click="sendCallSetFn('multi', 'video')" type="primary">
            视频呼叫
          </el-button>
        </div>
      </div>
    </div>

    <!-- 美化版 -->
    <template v-else>
      <div class="call_page">
        <img
          class="call_page_bg"
          draggable="false"
          src="@/assets/img/arcall/BG.png"
          alt=""
        />

        <div class="call_page_info">
          <div v-if="!isBack" class="call_page_info_">
            <div class="call_page_info_button">
              <el-button
                @click="backClick('p2p')"
                type="primary"
                style="width: 100%"
              >
                <div class="button_text">
                  <img
                    style="margin-right: 8px"
                    src="@/assets/img/arcall/Dcall.png"
                    draggable="false"
                    alt=""
                  />
                  点对点呼叫邀请
                </div>
              </el-button>
            </div>
            <div class="call_page_info_button">
              <el-button
                @click="backClick('multi')"
                type="primary"
                style="width: 100%"
              >
                <div class="button_text">
                  <img
                    style="margin-right: 8px"
                    src="@/assets/img/arcall/Mcalls.png"
                    draggable="false"
                    alt=""
                  />
                  多人呼叫邀请
                </div>
              </el-button>
            </div>
          </div>
          <template v-else>
            <!-- 点对点 -->
            <div v-if="type === 'p2p'" class="call_page_info_">
              <div class="send_call_header">
                <el-button @click="isBack = false" type="info" size="small">
                  返回
                </el-button>
                <p style="flex: 1; text-align: center">点对点呼叫邀请</p>
              </div>
              <div class="call_page_info_">
                <div>
                  <p>输入您朋友的用户ID</p>
                  <div>
                    <el-input
                      v-model="peerId"
                      placeholder="请填入呼叫人员 userId"
                      style="margin-right: 16px"
                    ></el-input>
                  </div>
                </div>
                <div style="margin-top: 40px">
                  <el-button @click="sendCallSetFn('p2p', 'audio')">
                    语音呼叫
                  </el-button>
                  <el-button
                    @click="sendCallSetFn('p2p', 'video')"
                    type="primary"
                  >
                    视频呼叫
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 多人 -->
            <div v-else class="call_page_info_">
              <div class="send_call_header">
                <el-button @click="isBack = false" type="info" size="small">
                  返回
                </el-button>
                <p style="flex: 1; text-align: center">多人呼叫邀请</p>
              </div>
              <div class="call_page_info_">
                <div>
                  <p>输入您朋友的用户ID</p>
                  <div style="display: flex">
                    <el-input
                      v-model="peerId"
                      @keyup.enter.native="addPeerUser"
                      placeholder="请填入呼叫人员 userId"
                      style="margin-right: 16px"
                    ></el-input>
                    <el-button @click="addPeerUser" type="primary"
                      >添加</el-button
                    >
                  </div>
                </div>

                <div style="margin-top: 20px">
                  <el-tag
                    v-for="peerUser in peerUserList"
                    :key="peerUser.userId"
                    style="margin: 0px 10px"
                    closable
                    @close="handleClose(peerUser.userId)"
                  >
                    {{ peerUser.userId }}
                  </el-tag>
                </div>

                <div style="margin-top: 40px">
                  <el-button
                    @click="sendCallSetFn('multi', 'video')"
                    type="primary"
                    size="large"
                  >
                    视频呼叫
                  </el-button>
                </div>
              </div>
            </div>
          </template>

          <div class="user_info">您的用户ID：{{ getLocalUserInfo.userId }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { makeP2PCall, makeMultiCall } from "@/until/arcall";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["getLocalUserInfo"]),
  },
  data() {
    return {
      /** 基础版 */
      // 输入
      peerId: "",
      // 存放
      peerUserList: [],

      /** 美化版 */
      // 是否可返回
      isBack: false,
      // 当前类型
      type: "p2p",
    };
  },
  created() {},
  mounted() {},
  methods: {
    /** 发起呼叫相关设置
     * type 呼叫类型 string
     * ** p2p 点对点
     * ** multi 多人
     * pattern 情景模式 string
     * ** audio 语音
     * ** video 视频
     */
    async sendCallSetFn(type, pattern) {
      if (this.peerUserList.length === 0 && this.peerId) {
        this.addPeerUser();
      }

      // 呼叫的人员相关信息
      const peerUserList = this.peerUserList;
      // const peerUserList = [
      // {
      //   userId: "123456123",
      // },
      // {
      //   userId: "987654321",
      // },
      // ];

      const store = this.$store;

      // 情景类型
      store.commit("updataPattern", pattern);
      // 情景模式
      store.commit("updataModel", type === "p2p" ? 1 : 0);

      try {
        if (type === "p2p") {
          store.commit("addP2PRemoteInfo", peerUserList[0]);
          // 点对点通话
          await makeP2PCall(peerUserList[0], pattern === "audio" ? 1 : 0);
          store.commit("updataIsCallingParty", true);
          // 呼叫中组件
          store.commit("updataCommentsStatus", 1);
        } else {
          // 设置远端用户信息列表
          store.commit("addMultiRemoteInfoList", peerUserList);
          // 多人通话
          await makeMultiCall(peerUserList, pattern === "audio" ? 1 : 0);
          store.commit("updataIsCallingParty", true);
          // 呼叫中组件
          store.commit("updataCommentsStatus", 2);
        }
      } catch (error) {
        console.log("发起呼叫失败", error);
        this.peerUserList = [];
      }
    },

    // 添加人员
    addPeerUser() {
      if (this.peerId) {
        this.peerUserList.push({
          userId: this.peerId,
        });
        this.peerId = "";
      }
    },
    // 去除人员
    handleClose(tag) {
      this.peerUserList = this.peerUserList.filter((item) => {
        return item.userId !== tag;
      });
    },

    /** 美化版所需 */
    backClick(type) {
      this.type = type;
      this.isBack = true;
    },
  },
};
</script>

<style scoped>
.send_call {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_userId {
  display: flex;
  width: 300px;
}

.peer_user_list {
  display: flex;
  justify-content: center;
}

/** 美化版样式 */
.call_page {
  display: flex;
  justify-content: flex-end;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}
.call_page_bg {
  width: 400px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.call_page_info {
  width: 400px;
  padding: 15px 30px;
  display: flex;
  flex-direction: column;
}
.call_page_info_ {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.call_page_info_button {
  margin: 20px 0px;
}

.button_text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.user_info {
  padding: 0px 0px 50px;
  text-align: center;
  color: #949494;
}

.send_call_header {
  display: flex;
  align-items: center;
}
</style>
